<%@ page language="java" pageEncoding="UTF-8" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html>

        <head>
            <title>后台管理</title>
            <meta charset="utf-8" />
            <base href="${pageContext.request.contextPath}/">
            <link rel="stylesheet" href="css/admin.css" />
            <script src="../js/jquery-3.6.0.js"></script>
            <script src="../js/jquery-form.js" type="text/javascript"></script>
            <script src="../js/template.js"></script>
            <script src="/layer/layer.js"></script>

        </head>

        <body>
            <div class="container">
                <div id="header">
                    <jsp:include page="header.jsp"></jsp:include>
                </div>
                <div id="admin_left">
                    <ul class="submenu">
                        <jsp:include page="left.jsp"></jsp:include>
                    </ul>
                    <div id="copyright"></div>
                </div>

                <div id="admin_right">
                    <div class="content_box" style="border:none; height: 640px;">
                        <div class="content">
                            <table width="98%" cellspacing="0" cellpadding="0" class="border_table_org"
                                style="float:left">
                                <thead>
                                    <tr>
                                        <th>最新10条订单</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="padding:5px 0">
                                            <table class="list_table3" width="100%">
                                                <thead>
                                                    <th>订单号</th>
                                                    <th>收货人</th>
                                                    <th>支付状态</th>
                                                    <th>金额</th>
                                                    <th>下单时间</th>
                                                    <th>操作</th>
                                                </thead>
                                                <tbody>
                                                    <c:forEach items="${ordersList}" var="order">

                                                        <tr>
                                                            <td>${order.ordersId}</td>
                                                            <td><b>${order.conSingnee}</b></td>
                                                            <td>
                                                                <c:if test="${order.state==1}"><b class="red3">待付款</b>
                                                                </c:if>
                                                                <c:if test="${order.state==2}">已付款</c:if>
                                                                <c:if test="${order.state==3}">已发货</c:if>
                                                                <c:if test="${order.state==4}">已收货</c:if>
                                                                <c:if test="${order.state==5}">退货中</c:if>
                                                                <c:if test="${order.state==6}">同意退货</c:if>
                                                                <c:if test="${order.state==7}">不同意退货</c:if>
                                                                <c:if test="${order.state==8}">退货成功</c:if>
                                                            </td>
                                                            <td><b class="red3">${order.totalMoney}</b></td>
                                                            <td>${order.times}</td>
                                                            <td><a href="javascript:void(0)"
                                                                    onclick="select(${order.id})"><img class="operator"
                                                                        src="images/admin/icon_check.gif"
                                                                        title="查看" /></a> <a href="javascript:void(0)"
                                                                    onclick="ide(${order.id})"><img class="operator"
                                                                        src="images/admin/icon_edit.gif"
                                                                        title="编辑" /></a> <a href="javascript:void(0)"
                                                                    onclick="del(${order.id})"><img class="operator"
                                                                        src="images/admin/icon_del.gif"
                                                                        title="删除" /></a></td>
                                                        </tr>
                                                    </c:forEach>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- 弹窗代码开始  -->
                    <div class="web_notice" id="msgdiv"
                        style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;text-align: left;">
                        <div id="msg"
                            style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
                            <form action="admin/orderDetail?opr=update" method="post" id="updateSubmit">
                                <h3 style="font-weight: bold;text-align: center;font-size: 30px;margin-top: -20px;">

                                    <span id="msgs">修改订单信息</span>

                                </h3>
                                <div style="font-size: 16px;">
                                    <input type="hidden" id="oid" name="oid" value="1">
                                    <span>&nbsp;&nbsp;&nbsp;订单号：</span> <input type="text" value="订单号"
                                        style="margin-top: 20px;padding: 5px;width: 300px;" id="upoid" name="upoid"
                                        disabled><br>

                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;收货人：</span><input type="text" name="upshr" value=""
                                        style="margin-top: 20px;padding: 3px;width: 300px;" id="upshr"><br>
                                    <span>收货地址：</span><input type="text" name="upshdz" value=""
                                        style="margin-top: 20px;padding: 3px;width: 300px;" id="upshdz"><br>
                                    <span>手机号码：</span><input type="text" name="uptel" value=""
                                        style="margin-top: 20px;padding: 3px;width: 300px;" id="uptel"><br>
                                    <span>订单金额：</span><input type="text" value="0"
                                        style="margin-top: 20px;padding: 3px;width: 300px;" id="upddje"
                                        name="upddje"><br>
                                    <span>订单状态：</span>
                                    <input type="radio" name="state" id="updfk" style="margin-top: 20px;" value="1">
                                    <label for="updfk">待付款</label>
                                    <input type="radio" name="state" id="upyfk" value="2"> <label
                                        for="upyfk">已付款</label>
                                    <input type="radio" name="state" id="upyfh" value="3"> <label
                                        for="upyfh">已发货</label>
                                    <input type="radio" name="state" id="upysh" value="4"> <label
                                        for="upysh">已收货</label><br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    &nbsp;&nbsp;
                                    <input type="radio" name="state" id="upthz" value="5"> <label
                                        for="upthz">退货中</label>
                                    <input type="radio" name="state" id="uptyth" value="6"> <label
                                        for="uptyth">同意退货</label>
                                    <input type="radio" name="state" id="upbtyth" value="7"> <label
                                        for="upbtyth">不同意退货</label>
                                    <input type="radio" name="state" id="upthcg" value="8"> <label
                                        for="upthcg">退货成功</label>


                                </div>

                                <div
                                    style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
                                    <a href="javascript:void(0)" onclick="updateFromSubmit()"
                                        style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 80px;margin-top: 60px;border-radius: 32px;width: 20%;">确定</a>
                                    <a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 340px;margin-top: -60px;border-radius: 32px;width: 20%;cursor: pointer;"
                                        onclick="nomsgDiv()">取消</a>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- 弹窗代码结束  -->
                </div>
                <div id="separator"></div>
            </div>
            <script>
                function select(oid) {
                    location.href = "/admin/orderDetail?opr=select&oid=" + oid;
                }
            </script>
        </body>
        <style>
            #msg,
            #msgdiv {
                display: none;
            }

            /* 弹窗动画 */
            #msg {
                -webkit-animation: fadeleftIn .4s;
                animation: fadeleftIn .4s;
                -webkit-animation-name: popIn;
                animation-name: popIn;
            }

            @-webkit-keyframes popIn {
                0% {
                    -webkit-transform: scale3d(0, 0, 0);
                    transform: scale3d(0.5, 0.5, 0.5);
                    opacity: 0;
                }

                50% {
                    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                }

                100% {
                    -webkit-transform: scale3d(1, 1, 1);
                    transform: scale3d(1, 1, 1);
                    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    opacity: 1;
                }
            }

            @keyframes popIn {
                0% {
                    -webkit-transform: scale3d(0, 0, 0);
                    transform: scale3d(0.5, 0.5, 0.5);
                    opacity: 0;
                }

                50% {
                    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
                }

                100% {
                    /* -webkit-transform: scale3d(1, 1, 1); */
                    /* transform: scale3d(1, 1, 1); */
                    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    opacity: 1;
                }
            }
        </style>
        <script>
            function show() {
                document.getElementById("msg").style.display = "block";
                document.getElementById("msgdiv").style.display = "block";
            }

            function nomsgDiv() {
                document.getElementById("msg").style.display = "none";
                document.getElementById("msgdiv").style.display = "none";
            }
        </script>
        <script>
            // location.href = "/admin/orderDetail?opr=select&oid=" + oid;
            function ide(oid) {
                $.ajax({
                    type: "get",
                    url: "/admin/orderDetail",
                    data: "opr=selectOrder&oid=" + oid,
                    dataType: "json",
                    success: function (result) {
                        $("#oid").val(result.id);
                        $("#upoid").val(result.ordersId);
                        $("#upshr").val(result.conSingnee);
                        $("#upshdz").val(result.address);
                        $("#uptel").val(result.tel);
                        $("#upddje").val(result.totalMoney);
                        if (result.state == 1) {
                            $("#updfk").prop("checked", true);
                        } else if (result.state == 2) {
                            $("#upyfk").prop("checked", true);
                        } else if (result.state == 3) {
                            $("#upyfh").prop("checked", true);
                        } else if (result.state == 4) {
                            $("#upysh").prop("checked", true);
                        } else if (result.state == 5) {
                            $("#upthz").prop("checked", true);
                        } else if (result.state == 6) {
                            $("#uptyth").prop("checked", true);
                        } else if (result.state == 7) {
                            $("#upbtyth").prop("checked", true);
                        } else if (result.state == 8) {
                            $("#upthcg").prop("checked", true);
                        }
                        // 显示弹窗
                        show();
                    },
                    error: function () {
                        layer.msg('系统繁忙，请稍后再试', { icon: 2 });
                    }


                })

            }
        </script>

        <script>
            function updateFromSubmit() {

                let datas = {
                    id: $("#oid").val(),
                    upshr: $("#upshr").val(),
                    upshdz: $("#upshdz").val(),
                    uptel: $("#uptel").val(),
                    upddje: $("#upddje").val(),
                    state: $('input:radio:checked').val(),
                }

                $.ajax({
                    type: "post",
                    url: "admin/orderDetail?opr=update",
                    data: datas,
                    dataType: "json",
                    success: function (result) {
                        if (result.msg == 'ok') {
                            layer.msg('修改成功', { icon: 1 });
                            nomsgDiv();
                            window.location.reload();
                        } else {
                            layer.msg('修改失败', { icon: 2 });
                        }
                    },
                    error: function () {
                        {
                            layer.msg('系统维护中，请稍后再试', { icon: 2 });
                        }
                    }

                })
            }
        </script>
        <script>
            function del(oid) {
                layer.confirm("确认删除吗？", function () {
                    $.ajax({
                        type: "post",
                        url: "/admin/order",
                        data: "opr=del&oid=" + oid,
                        dataType: "json",
                        beforeSend: function (r) {
                            //加载层-默认风格
                            layer.load();
                        },
                        success: function (result) {
                            if (result.msg == 'ok') {
                                layer.alert("删除成功", function (index) {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(result.msg, { icon: 2 });
                            }
                        },
                        complete: function (XMLHttpRequest, textStatus) {
                            // alert('远程调用成功，状态文本值：'+textStatus);
                            layer.closeAll('loading');
                        },
                        error: function () {
                            layer.msg('系统繁忙，请稍后再试', { icon: 2 });
                        }
                    })
                })
            }
        </script>

        </html>